<template>
  <div class="mainor">
    <el-form
      :inline="true"
      :rules="rules"
      :model="monitorForm"
      class="demo-form-inline"
      ref="userListFrom"
      label-width="80px"
    >
      <div
        class="main_spac1 paddingBottom5"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10 paddingBottom0">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>订单列表</span>
            </div>
          </div>
          <div class="marginBottom5 marginTop15">
            <el-form-item
              label="商户名称"
              prop="form.company_uid"
              class="marginBottom5"
              :rules="rules.company_uid"
            >
              <el-select
                v-model.trim="monitorForm.form.company_uid"
                placeholder="商户名称"
                class="wid240"
                ref="company"
                @change="uidChange"
              >
                <el-option
                  v-for="(user, index) in info.user"
                  :key="index"
                  :label="user.company.company_name+'【'+user.name+'】'"
                  :value="parseInt(user.company.id)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="配送日期"
              prop="form.send_time"
              :rules="rules.send_time"
            >
              <el-date-picker
                v-model="monitorForm.form.send_time"
                type="date"
                :editable="false"
                :clearable="false"
                class="time240"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="配送时间"
              prop="form.send_time_id"
              :rules="rules.send_time_id"
            >
              <el-select
                v-model.trim="monitorForm.form.send_time_id"
                placeholder="配送时间"
                class="wid240"
              >
                <el-option label="无" :value="0"></el-option>
                <el-option
                  v-for="(send_time, index) in info.send_time"
                  :key="index"
                  :label="send_time"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="clearfix"></div>
            <el-form-item
              label="备注"
              prop="form.remark"
              class="marginRight0 marginTop10 remark_in"
            >
              <el-input
                v-model.trim="monitorForm.form.remark"
                placeholder="备注"
                clearable
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <!-- 子账户 -->
      <div
        class="main_spac1"
        style="padding-bottom: 5px; padding-top: 5px"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10">
          <div class="mainor_zh boxnr" style="text-align: left">
            <div class="paddingLeft10">
              <span>收货人：{{ address.address.name }}</span>
              <span>{{ address.address.mobile }}</span>
              <span style="width: 80%">{{
                address.address.address
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品名称 -->
      <div
        class="main_spac1"
        style="padding-top: 5px"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10">
          <div class="mainor_sp boxdq" style="">
            <div class="box">
              <ul class="box">
                <li class="box">
                  <span> <em>*</em>商品名称： </span>
                  <el-autocomplete
                    v-model="formsp.value"
                    ref="searchSelect"
                    class="wid240 main_comm"
                    @clear="$refs.searchSelect.$children[0].blur()"
                    :fetch-suggestions="
                      (queryString, cb) => {
                        querySearchAsync(queryString, cb);
                      }
                    "
                    placeholder="请输入内容"
                    clearable
                    :highlight-first-item="true"
                    value-key="name"
                    @select="
                      (item) => {
                        handleSelect(item);
                      }
                    "
                  >
                    <template slot-scope="{ item }">
                      <div class="main_name">
                        {{ item.goods.name }}【{{ item.spu_unit.title }}】
                      </div>
                      <span class="main_addr" v-if="info.show_sku_code == 1">{{
                        item.goods_spu_code
                      }}</span>
                    </template>
                  </el-autocomplete>
                </li>
                <li class="box">
                  <span> <em>*</em>数量： </span>
                  <el-input
                    v-model.trim="formsp.num"
                    ref="focusw2"
                    placeholder="数量"
                    clearable
                    class="wid140"
                    @keyup.enter.native="mainor_sp"
                  ></el-input>
                </li>
              </ul>
              <div class="marginBottom10">
                <el-button type="primary" @click="mainor_qr"
                  >确认(回车)</el-button
                >
                <el-button class="reset marginLeft5" type="info" @click="reset"
                  >重置</el-button
                >
              </div>
            </div>
          </div>
          <div class="main_table main_taf marginTop0" style="min-height: 330px">
            <el-table
              ref="multipleTable"
              :data="monitorForm.list"
              element-loading-text="加载中"
              fit
              border
              highlight-current-row
            >
              <el-table-column label="序号">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <div v-for="(field, index) in info.field" :key="index">
                <el-table-column
                  label="商品图片"
                  prop="url"
                  width="100"
                  class-name="main_hei"
                  v-if="field == 2"
                >
                  <template slot-scope="scope">
                    <div class="demo-image__error mainor_im">
                      <el-image fit="fill" :src="scope.row.url">
                        <div slot="error" class="image-slot">
                          <img :src="puzzleImg" />
                        </div>
                      </el-image>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="商品名称"
                  prop="name"
                  width="200"
                  :show-overflow-tooltip="true"
                  v-if="field == 3"
                />
                <el-table-column
                  label="描述"
                  prop="describe"
                  v-if="field == 4"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="单位"
                  prop="unit"
                  v-if="field == 5"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="现有库存"
                  prop="name"
                  width="150"
                  v-if="field == 6"
                >
                  <template slot-scope="scope">0</template>
                </el-table-column>
                <el-table-column
                  label="数量"
                  width="200"
                  class-name="main_hei"
                  v-if="field == 7"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.order_num'"
                      :rules="rules.order_num"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.order_num"
                        :ref="'order_num' + scope.row.goods_spu_id"
                        placeholder="数量"
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="采购价"
                  prop="purchase_price"
                  v-if="field == 8"
                />
                <el-table-column
                  label="单价"
                  prop="order_price"
                  v-if="field == 9"
                />
                <el-table-column
                  label="小计"
                  prop="userNickname"
                  v-if="field == 10"
                >
                  <template slot-scope="scope">{{
                    (scope.row.order_num * scope.row.order_price).toFixed(2)
                  }}</template>
                </el-table-column>
              </div>
              <el-table-column
                label="备注"
                prop="remark"
                width="350"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model.trim="scope.row.remark"
                    placeholder="备注"
                    class="wid240"
                  ></el-input>
                  <el-link type="danger" @click="scdelete(scope.$index)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="newConBox_p200 paddingBottom10" id="newConBox">
            <div class="newConBox_h32">
              <div
                :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
              >
                <div class="mainor_prl">
                  <el-button
                    type="primary"
                    @click="preservation(1)"
                    v-repeatClick
                    >保存并继续添加</el-button
                  >
                  <el-button
                    class="reset marginLeft10"
                    type="info"
                    @click="preservation(2),beforeNext=false"
                    v-repeatClick
                    >保存并返回列表</el-button
                  >
                  <el-button @click="$router.back(-1)">取消</el-button>
                </div>
                <div class="mainor_prr">
                  合计品种：{{ monitorForm.list.length }}件
                  <span>合计金额：¥{{ total }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 页面设置 -->
    <div :class="[{ on: mainor_ex }, ' mainor_ex']">
      <div class="mainor_exb">
        <h3>表头设置</h3>
        <div class="mainor_exb_an">
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="(Header, index) in Header"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
              >{{ Header.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="mainor_exb_b">
        <el-button type="primary" @click="determine" v-repeatClick
          >确定</el-button
        >
        <el-button @click="recovery" v-repeatClick>恢复</el-button>
        <el-button @click="mainor_ex = false">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const shuju = {
  list: {
    pid: "",
    category_id: "",
    pic: "",
    url: "",
    name: "",
    describe: "",
    goods_id: "",
    standard_goods_id: "",
    goods_spu_id: "",
    standard_spu_id: "",
    standard_spu_code: "",
    byname: "",
    spu_name: "",
    unit: "",
    order_num: "",
    order_price: "",
    purchase_price: "",
    remark: "",
    show: false,
  },
  form: {
    company_uid: "",
    dispatch_user_id: "",
    nickname: "",
    line_id: 0,
    salesman_id: 0,
    contact: "",
    mobile: "",
    address: "",
    send_time: "",
    send_time_id: 0,
    remark: "",
  },
  formsp: {
    name: [],
    girard: null,
    num: "",
    value: "",
  },
  address: {
    address: {
      name: "",
      mobile: "",
      address: "",
    },
  },
};

import { mapGetters } from "vuex";
import {
  order_base,
  order_add
} from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/order/orderList_add";
import { puzzleImg, field_save, setting_company, goods_getGoodsSpu } from "@/api/currency";
import { parseTime } from "@/utils/index";

export default {
  computed: {
    ...mapGetters(["avatar"]),
    total() {
      let sz = 0;
      this.monitorForm.list.forEach((e) => {
        sz += parseFloat(e.order_num * e.order_price);
      });
      return sz.toFixed(2);
    },
  },
  components: {},
  data() {
    return {
      // 时间
      parseTime,
      // 验证
      rules,
      // 列表数据
      monitorForm: {
        form: {
          company_uid: "",
          dispatch_user_id: "",
          nickname: "",
          line_id: 0,
          salesman_id: 0,
          contact: "",
          mobile: "",
          address: "",
          send_time: "",
          send_time_id: 0,
          remark: "",
        },
        list: [],
      },
      address: {
        address: {
          name: "",
          mobile: "",
          address: "",
        },
      },
      puzzleImg,
      info: [],
      credit_status: 0,
      overdue_status: 0,
      // 商品搜索
      formsp: {
        name: [],
        girard: null,
        num: "",
        value: "",
      },
      show: true,
      // 页面设置
      mainor_ex: false,
      display_sub_account: false,
      type: [],
      Header: [
        {
          id: 1,
          name: "序号",
          disabled: true,
        },
        {
          id: 2,
          name: "商品图片",
          disabled: false,
        },
        {
          id: 3,
          name: "商品名称",
          disabled: true,
        },
        {
          id: 4,
          name: "描述",
          disabled: false,
        },
        {
          id: 5,
          name: "单位",
          disabled: true,
        },
        {
          id: 6,
          name: "现有库存",
          disabled: false,
        },
        {
          id: 7,
          name: "数量",
          disabled: true,
        },
        {
          id: 8,
          name: "采购价",
          disabled: false,
        },
        {
          id: 9,
          name: "单价",
          disabled: true,
        },
        {
          id: 10,
          name: "小计",
          disabled: true,
        },
        {
          id: 11,
          name: "备注",
          disabled: true,
        },
      ],
      // 监听滚动
      searchBarFixed: false,
      // 返回
      beforeNext:true,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.myDate();
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 信息
    this.order_base();
  },
  beforeRouteLeave(to, from, next) {
    if(this.beforeNext){
      setTimeout(() => {
        this.beforeNext=true
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    }else{
      next();
    }
  },
  methods: {
    // 时间
    myDate() {
      var myDate = new Date();
      myDate.setDate(myDate.getDate() + 1);
      this.monitorForm.form.send_time = parseTime(myDate,'{y}-{m}-{d}');
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr_sh = [];
      val.map((item) => {
        this.selectArr_sh.push({ id: item.id });
      });
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 商户
    uidChange(val){
      this.info.user.map(e=>{
        if(e.company.id==val){
          this.address.address.name=e.address.receive_man
          this.address.address.mobile=e.address.receive_mobile
          this.address.address.address=e.address.receive_address
          this.monitorForm.form.contact=e.address.receive_man
          this.monitorForm.form.mobile=e.address.receive_mobile
          this.monitorForm.form.address=e.address.receive_address
          this.monitorForm.form.dispatch_user_id=e.id
          return
        }
      })
    },
    // 商品搜索
    querySearchAsync(queryString, cb) {
      if (this.monitorForm.form.company_uid == "") {
        this.$message.error("商户名称不能为空");
        this.$refs.company.$children[0].focus();
        cb([]);
        return;
      }
      if (queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { name: queryString.trim() })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { name: queryString.trim() }
      );
      goods_getGoodsSpu(data).then((res) => {
        if (res.errcode == 0) {
          res.data.goods.map((e) => {
            e.name = e.goods.name + "【" + e.spu_unit.title + "】";
          });
          var results = res.data.goods;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    // 商品选择
    handleSelect(item) {
      this.formsp.name = item;
      this.formsp.girard = item.id;
      setTimeout(() => {
        this.$refs.focusw2.focus();
      }, 100);
    },
    // 商品选择确认(回车)
    mainor_sp(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.mainor_qr();
      }
    },
    // 点击添加
    mainor_qr() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      if (!formsp.name.name) {
        this.$message.error("请填写商品名称");
        this.$refs.searchSelect.focus();
        return;
      } else if (formsp.num == "") {
        this.$message.error("请填写数量");
        this.$refs.focusw2.focus();
        return;
      } else {
        let monitorForm_list = JSON.parse(
          JSON.stringify(this.monitorForm.list)
        );
        let ind = 0;
        if (monitorForm_list.length != 0) {
          monitorForm_list.map((e, index) => {
            if (e.goods_spu_id == formsp.girard) {
              ind = e.goods_spu_id;
              return;
            }
          });
          if (ind == 0) {
            this.handle(formsp);
          } else {
            setTimeout(() => {
              this.$refs["order_num" + ind][0].focus();
              this.reset();
              ind = 0;
            }, 100);
          }
        } else {
          this.handle(formsp);
        }
      }
    },
    handle(formsp) {
      let list = JSON.parse(JSON.stringify(shuju.list));
      formsp.name.goods.images.map((e) => {
        if (e.main == 1) {
          list.url = this.avatar.domain + e.path;
          list.pic = e.path;
        }
      });
      list.pid = formsp.name.goods.pid;
      list.category_id = formsp.name.goods.category_id;
      list.name = formsp.name.goods.name;
      list.goods_id = formsp.name.goods_id;
      list.standard_goods_id = formsp.name.goods.standard_goods_id;
      list.byname = formsp.name.goods.byname;
      list.order_price = formsp.name.purchase_price;
      list.goods_spu_id = formsp.name.id;
      list.standard_spu_id = formsp.name.standard_spu_id;
      list.standard_spu_code = formsp.name.standard_spu_code;
      list.spu_name = formsp.name.spu_name.title;
      list.unit = formsp.name.spu_unit.title;
      list.purchase_price = formsp.name.purchase_price;
      list.order_num = formsp.num;
      this.monitorForm.list.push(list);
      this.reset();
      setTimeout(() => {
        this.$refs.searchSelect.focus();
      }, 100);
    },
    reset() {
      this.formsp = JSON.parse(JSON.stringify(shuju.formsp));
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    // 删除
    scdelete(index) {
      this.monitorForm.list.splice(index, 1);
    },
    // 页面设置
    determine() {
      let arry = [];
      this.Header.map((e) => {
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      this.field_save(arry);
    },
    recovery() {
      this.field_save([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
    },
    field_save(arry) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 4 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 4, fields: JSON.stringify(arry) }
        // [1,2,3,4,5,6,7,8,9,10,11]
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.order_base();
          this.mainor_ex = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          if (this.monitorForm.list.length == 0) {
            this.$message.error("请至少添加一个商品");
            return;
          }

          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            this.order_data().form,
            { list: JSON.stringify(this.order_data().list) }
          );
          order_add(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              if (type == 1) {
                this.userClear();
              } else {
                this.$router.go(-1);
              }
            } else if (res.errcode == 40042) {
              this.shield_type = type;
              this.list_sh = res.list;
              this.shield = true;
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    order_data() {
      let form = JSON.parse(
        JSON.stringify(this.monitorForm.form)
      );
      let sz = JSON.parse(JSON.stringify(this.monitorForm.list));
      let list = sz.map((e) => {
        let { url, describe, show, ...sz } = e;
        return { ...sz };
      });
      return { form, list };
    },
    userClear() {
      this.credit_status = 0;
      this.overdue_status = 0;
      this.monitorForm.list = [];
      this.monitorForm.form = JSON.parse(JSON.stringify(shuju.form));
      this.myDate();
    },
    // 信息
    order_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      order_base(data).then((res) => {
        if (res.errcode == 0) {
          this.type = res.data.field;
          this.display_sub_account =
            res.data.display_sub_account == 1 ? true : false;
          this.info = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.main_name {
  top: 5px;
  position: relative;
}
.main_addr {
  top: -5px;
  position: relative;
}
.mainor {
  /deep/.el-button--default {
    border-color: $menuActiveText;
    color: $menuActiveText;
  }
  /deep/.el-form {
    margin-top: 10px;
    /deep/.el-form-item--mini.el-form-item,
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
  }
  .mainor_copy {
    position: relative;
    top: -4px;
  }
  .remark_in {
    width: 100%;
    /deep/.el-form-item__content {
      width: 80%;
      .el-input {
        width: 66.9%;
      }
    }
  }
  .mainor_zh {
    padding-top: 5px;
    padding-bottom: 5px;
    em {
      color: $colour_18;
      font-size: $font_14;
      display: inline-block;
      width: 90px;
      text-align: right;
      margin-right: 9px;
    }
    span {
      color: $colour_18;
      font-size: $font_14;
      margin-right: 15px;
    }
  }

  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 60px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        &:first-child {
          & > span {
            width: 85px;
          }
        }
      }
    }
  }
  .newConBox.on {
    width: calc(100% - 230px);
    padding-left: 0;
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .mainor_ex {
    position: fixed;
    width: 220px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);
    &.on {
      transform: translate3d(0, 0, 0);
    }
    .mainor_exb {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;
      h3 {
        font-size: $font_16;
        color: $colour_18;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid $colour_e6;
        padding-left: 20px;
      }
      .mainor_exb_an {
        padding-left: 20px;
        margin-top: 15px;
        /deep/.el-checkbox {
          display: block;
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
    }
    .mainor_exb_b {
      position: absolute;
      bottom: 0;
      width: 100%;
      border-top: 1px solid $colour_e6;
      height: 55px;
      text-align: center;
      /deep/.el-button--default {
        margin-top: 12px;
        border-color: $subActive;
        color: $menuText;
        &:hover {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }
  .main_table {
    /deep/.el-table--small td {
      padding: 10px 0;
    }
  }
  .main_taf {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .mainor_co {
    position: fixed;
    width: 460px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);
    /deep/.el-button--default {
      border: 0;
    }
    &.on {
      transform: translate3d(0, 0, 0);
    }
    .mainor_cob_c {
      position: absolute;
      top: 15px;
      right: 15px;
      i {
        font-size: 22px;
        font-weight: bold;
        color: $colour_6;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .mainor_cob_s {
      margin-top: 50px;
      margin-left: 10px;
      margin-right: 10px;
      p {
        font-size: $font_12;
        color: $colour_red;
        margin-top: 10px;
      }
      /deep/.el-input-group {
        width: 100%;
      }
    }
    .main_table {
      margin-left: 0;
      position: fixed;
      top: 0;
      height: calc(100% - 120px);
      width: 100%;
      margin-top: 120px;
      /deep/.el-table__body-wrapper {
        border-left: 0;
        table {
          border-left: 1px solid #ebeef5;
        }
      }
      /deep/.el-table__fixed-body-wrapper {
        border-right: 0;
        table {
          border-right: 1px solid #ebeef5;
        }
      }
      .main_table_p {
        margin-left: 10px;
        margin-right: 10px;
        height: 100%;
      }
      /deep/.el-table th .cell {
        font-size: $font_14;
      }
    }
  }
  .main_dialog .main_table {
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
      height: 360px;
    }
  }
}
</style>
